<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zen-Coding 的 HTML 速录简写</title>
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>

<body onload="prettyPrint();">
<h1>Zen-Coding 的 HTML 速录简写</h1>
<hr />
<h1><a name="Zen_HTML_Selectors"></a>Zen HTML 选择器<a href="#Zen_HTML_Selectors" class="section_anchor"></a></h1>
<h2><a name="E#name"></a>E#name<a href="#E#name" class="section_anchor"></a></h2>
<p> </p>
<h3><a name="div#name"></a><tt>div#name</tt><a href="#div#name" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;div id=&quot;name&quot;&gt;&lt;/div&gt;</pre>
<h2><a name="E.name"></a>E.name<a href="#E.name" class="section_anchor"></a></h2>
<p> </p>
<h3><a name="div.name"></a><tt>div.name</tt><a href="#div.name" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;div class=&quot;name&quot;&gt;&lt;/div&gt;</pre>
<h3><a name="div.one.two"></a><tt>div.one.two</tt><a href="#div.one.two" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;div class=&quot;one two&quot;&gt;&lt;/div&gt;</pre>
<h3><a name="div#name.one.two"></a><tt>div#name.one.two</tt><a href="#div#name.one.two" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;div id=&quot;name&quot; class=&quot;one two&quot;&gt;&lt;/div&gt;</pre>
<h2><a name="E&gt;E"></a>E&gt;E<a href="#E&gt;E" class="section_anchor"></a></h2>
<p> </p>
<h3><a name="head&gt;link"></a><tt>head&gt;link</tt><a href="#head&gt;link" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;head&gt;
    &lt;link/&gt;
&lt;/head&gt;</pre>
<h3><a name="table&gt;tr&gt;td"></a><tt>table&gt;tr&gt;td</tt><a href="#table&gt;tr&gt;td" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;table&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</pre>
<h3><a name="ul#name&gt;li.item"></a><tt>ul#name&gt;li.item</tt><a href="#ul#name&gt;li.item" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;ul id=&quot;name&quot;&gt;
    &lt;li class=&quot;item&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h2><a name="E+E"></a>E+E<a href="#E+E" class="section_anchor"></a></h2>
<h3><a name="p+p"></a><tt>p+p</tt><a href="#p+p" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;</pre>
<h3><a name="div#name&gt;p.one+p.two"></a><tt>div#name&gt;p.one+p.two</tt><a href="#div#name&gt;p.one+p.two" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;div id=&quot;name&quot;&gt;
    &lt;p class=&quot;one&quot;&gt;&lt;/p&gt;
    &lt;p class=&quot;two&quot;&gt;&lt;/p&gt;
&lt;/div&gt;</pre>
<h2><a name="E[attr]"></a><tt>E[attr]</tt><a href="#E[attr]" class="section_anchor"></a></h2>
<p><i>Added in v0.6</i> </p>
<h3><a name="p[title]"></a><tt>p[title]</tt><a href="#p[title]" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;p title=&quot;&quot;&gt;&lt;/p&gt;</pre>
<h3><a name="td[colspan=2]"></a><tt>td[colspan=2]</tt><a href="#td[colspan=2]" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;td colspan=&quot;2&quot;&gt;&lt;/td&gt;</pre>
<h3><a name="span[title=&quot;Hello&quot;_rel]"></a><tt>span[title=&quot;Hello&quot; rel]</tt><a href="#span[title=&quot;Hello&quot;_rel]" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;span title=&quot;Hello&quot; rel=&quot;&quot;&gt;&lt;/span&gt;</pre>
<h2><a name="E|filter"></a>E|filter<a href="#E|filter" class="section_anchor"></a></h2>
<p><i>Added in v0.6</i> </p>
<h3><a name="p.title|e"></a><tt>p.title|e</tt><a href="#p.title|e" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&amp;lt;p class=&quot;title&quot;&amp;gt;&amp;lt;/p&amp;gt;</pre>
<p>Read <a href="/p/zen-coding/wiki/Filters">Filters</a> for more info </p>
<h2><a name="E*N"></a>E*N<a href="#E*N" class="section_anchor"></a></h2>
<p> </p>
<h3><a name="p*3"></a><tt>p*3</tt><a href="#p*3" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;</pre>
<h3><a name="ul#name&gt;li.item*3"></a><tt>ul#name&gt;li.item*3</tt><a href="#ul#name&gt;li.item*3" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;ul id=&quot;name&quot;&gt;
    &lt;li class=&quot;item&quot;&gt;&lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;&lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h2><a name="E*N$"></a>E*N$<a href="#E*N$" class="section_anchor"></a></h2>
<h3><a name="p.name-$*3"></a><tt>p.name-$*3</tt><a href="#p.name-$*3" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;p class=&quot;name-1&quot;&gt;&lt;/p&gt;
&lt;p class=&quot;name-2&quot;&gt;&lt;/p&gt;
&lt;p class=&quot;name-3&quot;&gt;&lt;/p&gt;</pre>
<h3><a name="select&gt;option#item-$*3"></a><tt>select&gt;option#item-$*3</tt><a href="#select&gt;option#item-$*3" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;select&gt;
    &lt;option id=&quot;item-1&quot;&gt;&lt;/option&gt;
    &lt;option id=&quot;item-2&quot;&gt;&lt;/option&gt;
    &lt;option id=&quot;item-3&quot;&gt;&lt;/option&gt;
&lt;/select&gt;</pre>
<h2><a name="E+"></a>E+<a href="#E+" class="section_anchor"></a></h2>
<h3><a name="ul+"></a><tt>ul+</tt><a href="#ul+" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h3><a name="table+"></a><tt>table+</tt><a href="#table+" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;table&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</pre>
<h3><a name="dl+"></a><tt>dl+</tt><a href="#dl+" class="section_anchor"></a></h3>
<pre class="prettyprint linenums">&lt;dl&gt;
    &lt;dt&gt;&lt;/dt&gt;
    &lt;dd&gt;&lt;/dd&gt;
&lt;/dl&gt;</pre>
</body>
</html>
